<!--
 * @Description: 
 * @Author: wangyan
 * @Date: 2021-03-06 10:00:08
 * @LastEditTime: 2021-03-06 10:41:16
 * @LastEditors: Please set LastEditors
-->
<!-- 
与我相关 -->
<template>
  <div class="search-form">
    <el-form
      :inline="true"
      :model="searchForm"
      size="large"
      class="demo-form-inline"
    >
      <el-form-item :label="$t('flowDefine.form.flowName.title')">
        <el-input
          size="small"
          v-model="searchForm.name"
          :placeholder="$t('flowDefine.form.flowName.title')"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('flowTask.form.name.title')">
        <el-input
          size="small"
          v-model="searchForm.name"
          :placeholder="$t(`form.classificationName`)"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('flowTask.form.procDefCategory.title')">
        <el-popover placement="bottom" :width="200" trigger="click">
          <el-tree
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
          <template #reference>
            <el-input
              size="small"
              v-model="searchForm.parName"
              clearable
            ></el-input>
          </template>
        </el-popover>
      </el-form-item>
      <el-form-item :label="$t('flowTask.startTime')">
        <el-date-picker
          size="small"
          v-model="searchForm.date"
          type="daterange"
          range-separator="——"
          start-placeholder=""
          end-placeholder=""
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="onSearch">{{
          $t(`button.search`)
        }}</el-button>
        <el-button size="small" @click="resetForm">{{
          $t(`button.reset`)
        }}</el-button>
      </el-form-item>
    </el-form>
  </div>
  <Table
    :tableData="tableData"
    :columnData="columnData"
    :othercolumnData="othercolumnData"
  />
</template>

<script>
import Table from "../../components/Table.vue";
import { timestampToTime } from "../../utils/currency";

export default {
  name: "",
  data() {
    return {
      searchForm: {},
      tableData: [],
      columnData: [
        { title: this.$i18n.t("flowTask.form.name.title"), prop: "flowName" },
        {
          title: this.$i18n.t("flowTask.table.allocatePersonnel"),
          prop: "assignee",
        },
        {
          title: this.$i18n.t("flowTask.startTime"),
          prop: "createTime",
          formatter: (row) => {
            return timestampToTime(row.createTime);
          },
        },
        { title: this.$i18n.t("flowInstance.endDate"), prop: "lastTime" },
        { title: this.$i18n.t("flowTask.table.status"), prop: "status" },
      ],
      othercolumnData: [
        {
          title: this.$i18n.t("flowTask.table.operation"),
          prop: this.$i18n.t("flowTask.table.operation"),
          list: [
            { title: this.$i18n.t("routes.flowTracking"), fn: this.flowTrack},
            { title: this.$i18n.t("common.edit"), fn: this.editFlow },
          ],
        },
      ],
    };
  },
  components: {
    Table,
  },
  methods: {
    flowTrack(index, row) {
      console.log("index,row", index, row);
    },
    editFlow(index, row) {
      console.log("index,row", index, row);
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  // created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  // mounted() {},
};
</script>
<style scoped lang='scss'>
/* @import url(); 引入scss类 */
.search-form {
  margin-top: 15px;
}
</style>
